<template>
  <div class="learning-container">
    <back-header :title="title" :titleSize="16" :titleBold="false">
      <template #icon>
        <van-icon name="notes-o" size="24" />
      </template>
    </back-header>

    <div style="height: 11vh"></div>

    <!-- 添加加载进度条 -->
    <van-loading v-if="loading" class="loading-overlay" size="24px" vertical>
      加载中...
    </van-loading>

    <div v-else class="content">
      <!-- 内容区域 -->
      <div class="center_title" v-if="!reviewPage && type == '顺序练习'">
        历史正确率
        {{ selectedNum == 0 ? 0 : Math.round((rightNum / selectedNum) * 100) }}%
        <div class="mode-toggle">
          <van-button
            :type="isStudyMode ? 'primary' : 'default'"
            size="mini"
            class="mode-button"
            @click="toggleMode"
          >
            {{ isStudyMode ? "刷题模式" : "练习模式" }}
          </van-button>
        </div>
      </div>
      <div class="center_title" v-if="!reviewPage && type != '顺序练习'">
        当前正确率
        {{ selectedNum == 0 ? 0 : Math.round((rightNum / selectedNum) * 100) }}%
        <div class="mode-toggle">
          <van-button
            :type="isStudyMode ? 'primary' : 'default'"
            size="mini"
            class="mode-button"
            @click="toggleMode"
          >
            {{ isStudyMode ? "刷题模式" : "练习模式" }}
          </van-button>
        </div>
        <div v-if="type == '错题练习'" class="mode-collect">
          <van-button
            :type="addToCollect ? 'primary' : 'default'"
            size="mini"
            class="mode-button"
            @click="toggleAddToCollect"
          >
            {{ addToCollect ? "答对收藏" : "不收藏" }}
          </van-button>
        </div>
      </div>
      <div class="center_content">
        <div :key="item.id" style="margin-top: 10px; margin-bottom: 40px">
          {{ index + 1 }}.{{ item.question }}
        </div>
        <!-- 单选框组 -->
        <van-radio-group
          v-model="selectedRatio"
          v-show="item.answer.length == 1"
          class="option-group"
        >
          <div class="option-item">
            <van-radio
              :disabled="disabled"
              name="A"
              @click="radioHandler('A')"
              >{{ item.item1 }}</van-radio
            >
          </div>
          <div class="option-item">
            <van-radio
              :disabled="disabled"
              name="B"
              @click="radioHandler('B')"
              >{{ item.item2 }}</van-radio
            >
          </div>
          <div class="option-item">
            <van-radio
              :disabled="disabled"
              name="C"
              @click="radioHandler('C')"
              >{{ item.item3 }}</van-radio
            >
          </div>
          <div v-if="item.item4" class="option-item">
            <van-radio
              :disabled="disabled"
              name="D"
              @click="radioHandler('D')"
              >{{ item.item4 }}</van-radio
            >
          </div>
        </van-radio-group>

        <!-- 多选框组 -->
        <van-checkbox-group
          v-model="selectedChecked"
          v-show="item.answer.length > 1"
          class="option-group"
        >
          <div class="option-item">
            <van-checkbox name="A" :disabled="disabled">
              <div ref="check_item1">{{ item.item1 }}</div>
            </van-checkbox>
          </div>
          <div class="option-item">
            <van-checkbox name="B" :disabled="disabled">
              <div ref="check_item2">{{ item.item2 }}</div>
            </van-checkbox>
          </div>
          <div class="option-item">
            <van-checkbox name="C" :disabled="disabled">
              <div ref="check_item3">{{ item.item3 }}</div>
            </van-checkbox>
          </div>
          <div v-if="item.item4" class="option-item">
            <van-checkbox name="D" :disabled="disabled">
              <div ref="check_item4">{{ item.item4 }}</div>
            </van-checkbox>
          </div>
        </van-checkbox-group>

        <div v-if="item.item4" class="confirm_item">
          <van-button
            v-show="item.answer.length > 1"
            type="primary"
            @click="confirm"
            icon="success"
            size="small"
          >
            确定
          </van-button>
        </div>
        <div>
          <div v-show="showRemark">
            <van-divider>答案解析</van-divider>
            <p>{{ item.remark }}</p>
          </div>
        </div>
      </div>

      <!-- <div class="func_item">
        <van-button type="warning" size="mini" @click="showAnswer" icon="eye-o">
          答案
        </van-button>
        <van-button
          :type="collectFlag ? 'success' : 'primary'"
          :icon="collectFlag ? 'star-o' : 'star'"
          size="mini"
          @click="collect"
          style="margin-left: 4px"
        >
          收藏
        </van-button>

        <div class="picker_box">
          <van-field
            v-model="nowIndex"
            type="digit"
            :min="1"
            :max="total"
            style="width: 30px"
          />
          <span style="margin-left: 4px; font-size: 12px"> /{{ total }}</span>
          <van-button
            type="primary"
            size="mini"
            @click="skip"
            style="margin: 0 4px"
          >
            跳转
          </van-button>
        </div>

        <van-button type="primary" icon="arrow-left" size="mini" @click="prev">
          上一题
        </van-button>
        <van-button
          type="primary"
          icon="arrow"
          size="mini"
          @click="next"
          style="margin-left: 4px"
        >
          下一题
        </van-button>
      </div> -->
    </div>

    <!-- AI Chat Component -->
    <ai-chat :context="currentQuestion" />

    <!-- 放在外部使其正确显示 -->
    <van-action-bar safe-area-inset-bottom style="height: 8vh">
      <van-action-bar-icon
        color="#00dd00"
        @click="collect"
        :icon="collectFlag ? 'star' : 'star-o'"
        text="收藏"
      />
      <van-action-bar-icon
        @click="showAnswer"
        color="#ff0000"
        :icon="showAnswerIcon"
        text="答案"
      />
      <van-field
        v-model="nowIndex"
        style="width: 30px; background-color: #f0f8ff"
        type="digit"
        :min="1"
        :max="total"
      />
      <span style="font-size: 13px; margin-left: 5px">/{{ total }}</span>
      <van-action-bar-icon
        icon="share-o"
        color="#29B6F6"
        @click="skip"
        text="跳转"
      />
      <van-action-bar-button class="prev-button" @click="prev" text="上一题" />
      <van-action-bar-button class="next-button" @click="next" text="下一题" />
    </van-action-bar>
  </div>
</template>

<script setup>
import showAnswerIcon from "@/assets/showAnswer.png";
import BackHeader from "@/components/common/BackHeader.vue";
import AiChat from "@/components/AiChat.vue";
import { ref, watch, onMounted, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showNotify, showDialog } from "vant";
import questionItem from "@/api/questionItem/questionItem";
import collectRecord from "@/api/record/collectRecord";
import userRecord from "@/api/record/userRecord";
import selectRecord from "@/api/record/selectRecord";
import wrongRecord from "@/api/record/wrongRecord";
import selfTest from "@/api/selfTest";
import selfTestAnswer from "@/api/selfTest/selfTestAnswer";
import store from "@/store";

const title = computed(() => {
  if (store.getters.selectValue) {
    const index = store.getters.selectValue.indexOf("/");
    if (index != -1) {
      const arr = store.getters.selectValue.split("/");
      return route.query.type + " ：" + arr[1];
    } else {
      return route.query.type + " ：" + store.getters.selectValue;
    }
  } else {
    return route.query.type;
  }
});

// 学习模式切换
const isStudyMode = ref(false);

const toggleMode = () => {
  isStudyMode.value = !isStudyMode.value;
  localStorage.setItem(
    "learningMode",
    isStudyMode.value ? "study" : "practice"
  );
  showNotify({
    type: "success",
    message: `已切换至${isStudyMode.value ? "刷题" : "练习"}模式`,
    duration: 1000,
  });
};

const toggleAddToCollect = () => {
  addToCollect.value = !addToCollect.value;
  localStorage.setItem("addToCollect", addToCollect.value);
  let message;
  if (addToCollect.value) {
    message = "现在回答正确后会加入到收藏练习中";
  } else {
    message = "现在回答正确后会直接删除";
  }
  showNotify({
    type: "success",
    message: message,
    duration: 1000,
  });
};

const addToCollect = ref(false);
const router = useRouter();
const route = useRoute();
const reviewPage = ref(false);
const recordedAns = ref([]);
const showRemark = ref(false);
let type = null;
let selectedId = null;
const index = ref(0);
const total = ref(0);
const items = ref([]);
const item = ref({
  subject: "",
  question: "",
  item1: "",
  item2: "",
  item3: "",
  item4: "",
  answer: "",
  remark: "",
});
const selectedRatio = ref("");
const selectedChecked = ref([]);
const collectFlag = ref(false);
const rightNum = ref(0);
const selectedNum = ref(0);
const nowIndex = ref(1);
const disabled = ref(false);

// 添加一个数组来跟踪题目状态：0-未答题，1-答对，2-答错
const questionStatus = ref([]);

// 添加 loading 状态
const loading = ref(true);

// Add computed property for current question context
const currentQuestion = computed(() => {
  if (!item.value) return null;

  let context = `题目: ${item.value.question}\n`;

  if (item.value.item1) context += `${item.value.item1}\n`;
  if (item.value.item2) context += `${item.value.item2}\n`;
  if (item.value.item3) context += `${item.value.item3}\n`;
  if (item.value.item4) context += `${item.value.item4}\n`;

  // 如果解析已显示，也包含在上下文中
  if (showRemark.value && item.value.remark) {
    context += `\n解析: ${item.value.remark}\n`;
  }

  // 如果答案已显示，也包含在上下文中
  if (
    showRemark.value ||
    selectedRatio.value === item.value.answer ||
    (item.value.answer.includes("+") &&
      item.value.answer
        .split("+")
        .every((a) => selectedChecked.value.includes(a)))
  ) {
    context += `\n正确答案: ${item.value.answer}\n`;
  }

  return context;
});

watch(index, (newVal, oldVal) => {
  nowIndex.value = newVal + 1;
  selectedRatio.value = "";
  selectedChecked.value = [];
  item.value = items.value[newVal];
  reviewSelected(newVal);
  checkCollect();
  showRemark.value = false;
  sentToServer(newVal, oldVal);
});

const skip = () => {
  if (nowIndex.value < 1) {
    showNotify({ type: "danger", message: "跳转页码不合法！" });
    return;
  }
  if (nowIndex.value > total.value) {
    showNotify({ type: "danger", message: "跳转页码不合法！" });
    return;
  }
  index.value = parseInt(nowIndex.value) - 1;
};

const sentToServer = async (newVal, oldVal) => {
  if (type == "顺序练习") {
    userRecord.updateOrAdd(
      index.value,
      selectedId,
      rightNum.value,
      selectedNum.value
    );
    const jsonStr = JSON.stringify(recordedAns.value);

    selectRecord.updateOrAdd(jsonStr, selectedId, questionStatus.value);
  }
};

const reviewSelected = (newVal) => {
  let res = recordedAns.value[newVal].filter((a) => a != "");
  if (res.length > 1) {
    selectedChecked.value = res;
  }
  if (res.length == 1) {
    selectedRatio.value = res[0];
  }
};

const checkCollect = async () => {
  const res = await collectRecord.checkCollect(item.value.id);
  if (res.data == "收藏过") {
    collectFlag.value = true;
  } else {
    collectFlag.value = false;
  }
};

const showAnswer = () => {
  if (item.value.answer.length == 1) {
    selectedRatio.value = item.value.answer;
  } else {
    let arr = item.value.answer.split("+");
    selectedChecked.value = arr;
  }
};

const collect = () => {
  collectFlag.value = !collectFlag.value;
  let flag = collectFlag.value ? 1 : 0;
  collectRecord.updateCollect(item.value.id, flag, route.query.selectedId);
};

const next = () => {
  if (index.value == total.value - 1) {
    showNotify({
      message: "已经是最后一题了！",
      type: "danger",
    });
    return;
  }
  index.value = index.value + 1;
};

const prev = () => {
  if (index.value == 0) {
    showNotify({
      message: "已经是第一题了！",
      type: "danger",
    });
    return;
  }
  index.value = index.value - 1;
};

const checkIfNotAnswered = () => {
  const arr = recordedAns.value[index.value].filter((item) => item != "");
  let flag = false;
  if (arr.length > 0) {
    //表示以前做过这道题
    flag = false;
  } else {
    flag = true;
  }
  return flag;
};

const radioHandler = (selected) => {
  if (!selected) {
    showNotify({ type: "warning", message: "请选择您的选项!" });
    return;
  }

  const flag = checkIfNotAnswered();

  if (selected === item.value.answer) {
    showNotify({
      type: "success",
      message: "回答正确!",
      duration: 1500,
    });

    if (flag) {
      rightNum.value++;
      selectedNum.value++;
      if (type == "错题练习") {
        wrongRecord.deleteByQuestionId(item.value.id);
        if (addToCollect.value && !collectFlag.value) {
          collectRecord.updateCollect(item.value.id, 1, selectedId);
        }
      }
    }
    showRemark.value = true;
    questionStatus.value[index.value] = 1; // 标记为答对

    // 记录答案
    recordedAns.value[index.value] = [selected];

    // 根据模式决定是否自动进入下一题
    if (isStudyMode.value && index.value < total.value - 1) {
      disabled.value = true;
      setTimeout(() => {
        next();
        disabled.value = false;
      }, 1500);
    }
  } else {
    showNotify({
      type: "danger",
      message: "回答错误!",
      duration: 1500,
    });
    if (flag) {
      if (type != "错题练习") {
        wrongRecord.addWrongRecord(item.value.id, selectedId);
      }
      selectedNum.value++;
    }
    questionStatus.value[index.value] = 2; // 标记为答错

    // 记录错误答案
    recordedAns.value[index.value] = [selected];

    // 根据模式决定是否自动进入下一题
    if (isStudyMode.value && type !== "错题练习") {
      disabled.value = true;
      setTimeout(() => {
        next();
        disabled.value = false;
      }, 1500);
    }
  }
};

const confirm = () => {
  if (!selectedChecked.value || selectedChecked.value.length === 0) {
    showNotify({ type: "warning", message: "请选择您的选项!" });
    return;
  }

  const sortedAnswer = item.value.answer.split("+").sort().join("+");
  const sortedSelected = selectedChecked.value.sort().join("+");

  const flag = checkIfNotAnswered();

  if (sortedSelected === sortedAnswer) {
    showNotify({
      type: "success",
      message: "回答正确!",
      duration: 1500,
    });
    if (flag) {
      rightNum.value++;
      selectedNum.value++;
      if (type == "错题练习") {
        wrongRecord.deleteByQuestionId(item.value.id);
        if (addToCollect.value && !collectFlag.value) {
          collectRecord.updateCollect(item.value.id, 1, selectedId);
        }
      }
    }
    showRemark.value = true;
    questionStatus.value[index.value] = 1; // 标记为答对

    // 记录答案
    recordedAns.value[index.value] = selectedChecked.value;

    // 根据模式决定是否自动进入下一题
    if (isStudyMode.value && index.value < total.value - 1) {
      disabled.value = true;
      setTimeout(() => {
        next();
        disabled.value = false;
      }, 1500);
    }
  } else {
    showNotify({
      type: "danger",
      message: "回答错误!",
      duration: 1500,
    });
    if (flag) {
      if (type != "错题练习") {
        wrongRecord.addWrongRecord(item.value.id, selectedId);
      }
      selectedNum.value++;
    }
    questionStatus.value[index.value] = 2; // 标记为答错

    // 记录错误答案
    recordedAns.value[index.value] = selectedChecked.value;

    // 根据模式决定是否自动进入下一题
    if (isStudyMode.value && type !== "错题练习") {
      disabled.value = true;
      setTimeout(() => {
        next();
        disabled.value = false;
      }, 1500);
    }
  }
};

const returnToIndex = (notify) => {
  showNotify({
    type: "danger",
    message: notify,
  });
  router.push({
    path: "/learning",
  });
};

const initItems = (res) => {
  items.value = res.data;
  item.value = items.value[0];
  total.value = items.value.length;
  questionStatus.value = Array(total.value).fill(0); // 重置状态数组
};

const initRecordsAns = () => {
  for (let index = 0; index < total.value; index++) {
    recordedAns.value.push(new Array());
  }
};

const getQuestions = async () => {
  loading.value = true; // 开始加载
  try {
    if (
      !route.query.type ||
      (!route.query.question &&
        !route.query.selfTestId &&
        !route.query.selectedId)
    ) {
      router.push({
        path: `/learning`,
      });
      return;
    }

    if (route.query.type == "随机练习" && route.query.question != undefined) {
      type = route.query.type;
      const res = await questionItem.getLearnItemsByQuestion(
        route.query.question
      );
      if (res.data.length == 0) {
        returnToIndex("搜索无结果！");
        return;
      }
      initItems(res);
      initRecordsAns();
      await checkCollect();
    } else if (
      route.query.selfTestId != undefined &&
      route.query.type == "回顾错题"
    ) {
      type = "随机练习";
      reviewPage.value = true;
      const res = await selfTest.geBySelfTestId(route.query.selfTestId);

      initItems(res);
      initSelfRecord();
      await checkCollect();
    } else if (
      route.query.selectedId != undefined &&
      route.query.type != undefined
    ) {
      selectedId = route.query.selectedId;
      type = route.query.type;

      const res = await questionItem.getLearnItems(
        route.query.type,
        route.query.selectedId
      );

      if (res.data.length == 0) {
        if (type == "错题练习") {
          returnToIndex("您没有错题！请继续保持！");
          router.push({
            path: "/learning",
          });
          return;
        }
        if (type == "收藏练习") {
          returnToIndex("您没有收藏任何题目！");
          router.push({
            path: "/learning",
          });
          return;
        }
      }
      initItems(res);
      await checkCollect();
      if (type == "顺序练习") {
        getRecord();
      } else {
        initRecordsAns();
      }
    }
  } catch (error) {
    console.error("Error in getQuestions:", error);
    // returnToIndex("加载题目时发生错误");
  } finally {
    loading.value = false; // 结束加载
  }
};

const reset = (res) => {
  showDialog({
    title: "提示",
    message: "重新来过会清空您该章节的所有记录，是否确认？",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showCancelButton: true,
  })
    .then(() => {
      userRecord.deleteBySelectId(selectedId).then((response) => {
        showNotify({ type: "success", message: `${response.data}` });
        for (let index = 0; index < total.value; index++) {
          recordedAns.value.push(new Array());
        }
      });
      questionStatus.value = Array(total.value).fill(0);
    })
    .catch(() => {
      rightNum.value = res.data.rightNum;
      selectedNum.value = res.data.selectedNum;
      initRecords(res.data.indexRecord);
    });
};

const resetConfirm = (res) => {
  showDialog({
    title: "提示",
    message: `您上一次练习到第${res.data.indexRecord + 1}题，是否继续？`,
    confirmButtonText: "继续练习",
    cancelButtonText: "重新来过",
    showCancelButton: true,
  })
    .then(() => {
      rightNum.value = res.data.rightNum;
      selectedNum.value = res.data.selectedNum;
      initRecords(res.data.indexRecord);
    })
    .catch(() => {
      reset(res);
    });
};

const initSelfRecord = () => {
  selfTestAnswer.geBySelfTestId(route.query.selfTestId).then((res) => {
    recordedAns.value = res.data;
    for (let index = 0; index < recordedAns.value.length; index++) {
      const element = recordedAns.value[index];
      const arr = element.filter((item) => item != "");
      if (arr.length == 0) {
        questionStatus.value[index] = 0;
      } else if (arr.length == 1) {
        const ans = arr[0];
        if (ans == items.value[index].answer) {
          questionStatus.value[index] = 1;
        } else {
          questionStatus.value[index] = 2;
        }
      } else {
        const arrToStr = arr.sort().join("+");
        if (arrToStr == items.value[index].answer) {
          questionStatus.value[index] = 1;
        } else {
          questionStatus.value[index] = 2;
        }
      }
    }
    reviewSelected(0);
  });
};

const getRecord = () => {
  userRecord.getBySelectId(selectedId).then((res) => {
    if (res.data) {
      resetConfirm(res);
    } else {
      for (let index = 0; index < total.value; index++) {
        recordedAns.value.push(new Array());
      }
    }
  });
};

const initRecords = (param) => {
  selectRecord.getBySelectId(selectedId).then((res) => {
    if (!res.data) {
      for (let index = 0; index < total.value; index++) {
        recordedAns.value.push(new Array());
      }
    } else {
      if (res.data.length != total.value) {
        let arr = JSON.parse(res.data.result.selected);

        for (let index = 0; index < total.value - res.data.length; index++) {
          let emptyArr = [];
          for (let i = 0; i < 4; i++) {
            emptyArr.push("");
          }
          arr.push(emptyArr);
        }
        recordedAns.value = arr;
      } else {
        if (res.data.result.selected) {
          recordedAns.value = JSON.parse(res.data.result.selected);
        }
        if (res.data.result.questionStatus) {
          questionStatus.value = JSON.parse(res.data.result.questionStatus);
        }
      }
    }
    index.value = param;
  });
};

onMounted(async () => {
  // 从localStorage读取学习模式设置
  const savedMode = localStorage.getItem("learningMode");

  isStudyMode.value = savedMode === "study";

  const savedAddToCollect = localStorage.getItem("addToCollect");
  addToCollect.value = savedAddToCollect === "true";

  await getQuestions();
});
</script>

<style scoped>
.learning-container {
  padding-bottom: 8vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  position: relative;
}

.content {
  flex: 1;
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.center_title {
  padding-left: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.center_content {
  flex: 1;
  padding: 0 10px;
  font-size: 15px;
}

.func_item {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
}

.picker_box {
  display: flex;
  align-items: center;
  margin: 0 4px;
}

:deep(.van-button--mini) {
  min-width: 0;
  padding: 0 5px;
  height: 22px;
  font-size: 10px;
  flex-shrink: 0;
}

:deep(.van-field) {
  padding: 0;
  width: 30px;
}

:deep(.van-field__control) {
  border: 1px solid #e0e0ff;
  border-radius: 4px;
  background-color: #f0f8ff;
  text-align: center;
}

/* Option styles */
.option-group {
  width: 96%;
  padding: 0;
}

.option-item {
  width: 96%;
  margin-top: 10px;
}

.option-item :deep(.van-radio),
.option-item :deep(.van-checkbox) {
  width: 100%;
  padding: 12px;
  background-color: #f8f8f8;
  border-radius: 6px;
}

.option-item :deep(.van-radio__label),
.option-item :deep(.van-checkbox__label) {
  white-space: normal;
  word-break: break-word;
}

.confirm_item {
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
}

/* Remove unnecessary styles that could cause issues */
.learn-container,
.left,
.center {
  display: none;
}

/* Media queries for responsive design */
@media (max-width: 375px) {
  .mode-button {
    font-size: 11px;
    padding: 0 8px;
  }

  .center_title {
    font-size: 13px;
  }
}

@media (prefers-color-scheme: dark) {
  .learning-container {
    background-color: #1a1a1a;
  }

  .option-item :deep(.van-radio),
  .option-item :deep(.van-checkbox) {
    background-color: #2c2c2c;
  }

  :deep(.van-action-bar) {
    background-color: #1a1a1a;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  }

  :deep(.van-field__control) {
    background-color: #2c2c2c;
    border-color: #3a3a3a;
    color: #fff;
  }

  :deep(.mode-button.van-button--default) {
    background: #2c2c2c;
    border-color: #3a3a3a;
    color: #e0e0e0;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .func_item {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 50px; /* Space for tabbar */
  }

  .func_item_left,
  .func_item_right {
    width: auto;
  }

  .picker_box {
    position: relative;
    left: 0;
    transform: none;
    margin: 10px auto;
  }
}

.loading-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
}

/* 添加这些样式来确保ActionBar正确显示 */
:deep(.van-action-bar) {
  z-index: 999;
}

/* 修改 ActionBar 整体样式 */
:deep(.van-action-bar) {
  box-shadow: 0 -2px 10px rgba(0, 114, 255, 0.1);
  background-color: #ffffff;
  z-index: 999;
}

/* 修改 ActionBar 图标颜色 */
:deep(.van-action-bar-icon__icon) {
  transition: all 0.3s ease;
}

:deep(.van-action-bar-icon:active .van-action-bar-icon__icon) {
  transform: scale(1.1);
}

/* 蓝色渐变按钮样式 */
:deep(.prev-button) {
  background-image: linear-gradient(to right, #4facfe, #00f2fe) !important;
  border: none !important;
}

:deep(.next-button) {
  background-image: linear-gradient(to right, #0072ff, #00c6ff) !important;
  border: none !important;
}

/* 调整 ActionBar 内部元素布局 */
:deep(.van-action-bar-icon) {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:deep(.van-action-bar-button) {
  /* 删除 height: 100% !important; */
}

/* 添加模式切换按钮样式 */
.mode-toggle {
  margin-left: auto;
  padding-right: 10px;
}

.mode-collect {
  margin-left: 5px;
  padding-right: 10px;
}

.mode-button {
  border-radius: 16px;
  font-size: 12px;
  padding: 0 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 28px;
  line-height: 28px;
  font-weight: 500;
  overflow: hidden;
  position: relative;
}

.mode-button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  z-index: 1;
  pointer-events: none;
}

:deep(.mode-button.van-button--default) {
  border: 1px solid #d8d8d8;
  color: #666;
  background: #f8f8f8;
}

:deep(.mode-button.van-button--primary) {
  background-image: linear-gradient(to right, #4facfe, #00f2fe);
  border: none;
}

:deep(.mode-button:active) {
  transform: scale(0.95);
}
</style>
